<template>
  <div>
    <div class="show-head-1">
      <img src="../../assets/img/theater_detail_bg.png" alt />
      <div class="show-head">
          <router-link :to="{path:'/theater'}">  <p class="iconfont icon-zuojiankuohao"></p></router-link>
      
      </div>
      <div class="show-nav">
          <img :src="ShowOne.theatre_pic" alt="">
      <div class="show-nav-2">
        <h2>{{ShowOne.theatre_name}}</h2>
        <p>{{ShowOne.sch_num}} 场在售演出</p>
      </div>
      <p class="show-p">{{ShowOne.city_name}} | {{ShowOne.theatre_address}} <span class="iconfont icon-weibiaoti-3"></span></p>
      
    </div>
    </div>
  </div>
</template>
  
<script>
import { mapState, mapGetters } from "vuex";
import "../../assets/iconfont/iconfont.css";
export default {
  data() {
    return {
        theater:"../../views/theater"
    };
  },
  computed: {
    ...mapState("show", ["ShowOne"]),
  },
};
</script>

<style  lang='scss' scoped>
.show-head-1 {
  height: 3.16rem;
  position: relative;
  overflow: hidden;
  width:100%;
}
.show-head-1 img{height:100%;width:100%}

.show-head {
    position: absolute;top:0.2rem;
  height: 0.8rem;
  p {
    font-size: 0.4rem;
    color: #ffffff;
    margin-left: 0.22rem;
  }
}
.show-nav {
    img{height:0.9rem;width:0.9rem;border-radius: 50%;}
    margin-left: 0.2rem;
     color: #ffffff;
      position: absolute;top:1.3rem;
  height: 2.1rem;
  width: 100%;
  .show-p{
      position: absolute;top:1.3rem;
      span{
          color: #ff6743;
          display: inline-block;
          font-size: 0.4rem;
          width:0.6rem;
          height:0.6rem;
          border-radius: 50%;
          text-align: center;
          line-height: 0.6rem;
          background:#ededed;
          margin-left: 0.6rem;
               position: absolute;top:-0.3rem;
      }
  }
  .show-nav-2{
      position: absolute; top:0.1rem;right: 4.2rem;
      font-size: 0.24rem;
      line-height: 0.4rem;
      color: #ffffff;
      p{
          font-size: 0.26rem;
      }
  }
}
</style>